<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<jsp:include page="../../../../commons.jsp"></jsp:include>
<html>
<head>
    <title>预排名估算</title>
    <link href="${ctx}/resources/assets/plugins/sidebar/css/jquery-accordion-menu.css?v=1" rel="stylesheet" type="text/css" />
    <link href="${ctx}/resources/assets/plugins/sidebar/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="${ctx}/resources/metronic/global/plugins/respond.min.js"></script>
    <script src="${ctx}/resources/metronic/global/plugins/excanvas.min.js"></script>
    <![endif]-->
    <!-- BEGIN CORE PLUGINS -->
    <!--<script src="${ctx}/resources/metronic/global/plugins/bootstrap/js/bootstrap.js" type="text/javascript"></script>-->
    <script src="${ctx}/resources/assets/plugins/cBootstrap3/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/js.cookie.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL PLUGINS -->

    <script src="${ctx}/resources/metronic/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

    <!--<script src="${ctx}/resources/metronic/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="${ctx}/resources/metronic/global/plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js" type="text/javascript"></script>-->

    <script src="${ctx}/resources/metronic/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/jquery-validation/js/localization/messages_zh.min.js" type="text/javascript"></script>

    <script src="${ctx}/resources/metronic/global/plugins/ladda/spin.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/ladda/ladda.min.js" type="text/javascript"></script>

    <script src="${ctx}/resources/metronic/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>

    <!--手动修改过源码-->
    <script src="${ctx}/resources/metronic/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
    <!--<script src="${ctx}/resources/metronic/global/plugins/select2/js/i18n/zh-CN.js" type="text/javascript"></script>-->

    <script src="${ctx}/resources/metronic/global/plugins/bootstrap-table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>

    <script src="${ctx}/resources/metronic/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.js" type="text/javascript"></script>

    <script src="${ctx}/resources/metronic/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/global/plugins/bootstrap-confirmation/bootstrap-confirmation.min.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN THEME GLOBAL SCRIPTS -->
    <script src="${ctx}/resources/metronic/global/scripts/app.min.js" type="text/javascript"></script>
    <!-- END THEME GLOBAL SCRIPTS -->


    <!-- BEGIN THEME LAYOUT SCRIPTS -->
    <!--layout-new.js 已经被修改过-->
    <script src="${ctx}/resources/metronic/layouts/layout3/scripts/layout-new.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/layouts/layout3/scripts/demo.min.js" type="text/javascript"></script>
    <script src="${ctx}/resources/metronic/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
    <!-- END THEME LAYOUT SCRIPTS -->


    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="${ctx}/resources/assets/js/nbptUtil.js?v=1" type="text/javascript"></script>
    <link rel="stylesheet" href="${ctx}/resources/assets/plugins/nbptLoading/nbptLoading.css">
    <script src="${ctx}/resources/assets/plugins/nbptLoading/nbptLoading.js" type="text/javascript"></script>
    <script src="${ctx}/resources/assets/plugins/jquery-noty/jquery.noty.packaged.js" type="text/javascript"></script>
    <script src="${ctx}/resources/assets/plugins/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="${ctx}/resources/assets/plugins/mustache/mustache.js" type="text/javascript"></script>
    <!--<script src="${ctx}/resources/assets/plugins/jqueryForm/jquery.form.min.js" type="text/javascript"></script>-->
    <!--<script src="${ctx}/resources/assets/plugins/quicksearch/jquery.quicksearch.js" type="text/javascript"></script>-->
    <script src="${ctx}/resources/assets/plugins/bootstrap-multiselect/js/bootstrap-multiselect.js" type="text/javascript"></script>
    <script src="${ctx}/resources/assets/plugins/zTreeV3/js/jquery.ztree.all.min.js" type="text/javascript"></script>
    <!--<script src="${ctx}/resources/assets/plugins/infinite-scroll/jquery.infinitescroll.min.js" type="text/javascript"></script>-->
    <!--<script src="${ctx}/resources/assets/plugins/infinite-scroll/behaviors/manual-trigger.js" type="text/javascript"></script>-->
    <script type="text/javascript" src="${ctx}/resources/assets/plugins/Validform/js/Validform.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->


    <!-- BEGIN ConfigData -->
    <script src="${ctx}/resources/assets/js/colorConfig.js" type="text/javascript"></script>
    <!-- END ConfigData -->

    <!-- BEGIN ECHARTS -->
    <script src="${ctx}/resources/assets/plugins/echarts3/echarts.min.js"></script>
    <!-- END ECHARTS -->

    <script src="${ctx}/resources/assets/plugins/GoJS/go.js"></script>
    <!-- BEGIN VUE -->
    <script src="${ctx}/resources/assets/js/vue.js" type="text/javascript"></script>

    <script src="${ctx}/resources/assets/plugins/sidebar/js/jquery-accordion-menu.js" type="text/javascript"></script>
    <!-- END VUE -->

    <style type="text/css">
        .sidebar-left-menu{width:180px;position:absolute;left:0;}
        .jquery-accordion-menu{
            width: 180px;
            min-width:180px;
            box-shadow:none;
        }
        .jquery-accordion-menu ul li a i{
            margin-top: 3px;
            width: 24px;
        }
        .jquery-accordion-menu .submenu-indicator{
            line-height: 15px;
        }
        .filterinput{
            background-color:rgba(249, 244, 244, 0);
            border-radius:15px;
            width:90%;
            height:30px;
            border:thin solid #FFF;
            text-indent:0.5em;
            font-weight:bold;
            color:#FFF;
        }
        #demo-list a{
            overflow:hidden;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            white-space:nowrap;
            width:100%;
        }
        .fix-left-bg{
            position: fixed;
            left: 0;
            bottom:0;
            top: 41px;
            width: 180px;
            background: #343e43;
        }
    </style>
</head>
<body class="page-container-bg-solid">
<!-- BEGIN HEADER -->
<div class="page-header">
    <!-- BEGIN HEADER MENU -->
    <div class="page-header-menu">
        <div class="container-fluid">
            <!-- BEGIN MEGA MENU -->
            <!-- DOC: Apply "hor-menu-light" class after the "hor-menu" class below to have a horizontal menu with white background -->
            <!-- DOC: Remove data-hover="dropdown" and data-close-others="true" attributes below to disable the dropdown opening on mouse hover -->
            <div class="hor-menu">
                <div class="page-logo">
                    <a href="index.html">
                        <img src="${ctx}/resources/assets/img/logo.png" alt="logo" class="logo-special">
                    </a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="">
                        <a href="${ctx}/group/list">集团考核<span class="arrow"></span></a>
                    </li>
                    <li>
                        <a href="${ctx}/analysis/quality/reckonList">省内分析<span class="arrow"></span></a>
                    </li>
                    <li class="">
                        <a href="device-gis.html">
                            设备监控
                            <span class="arrow"></span>
                        </a>
                    </li>
                    <li class="">
                        <a href="alarm-detail.html">
                            告警监控
                            <span class="arrow"></span>
                        </a>
                    </li>
                    <li class="">
                        <a href="export.html">
                            自定义导出
                            <span class="arrow"></span>
                        </a>
                    </li>
                </ul>
                <!-- BEGIN TOP NAVIGATION MENU -->
                <!--   <div class="page-header-top">
                       <div class="top-menu">
                           <ul class="nav navbar-nav pull-right hide">
                               &lt;!&ndash; BEGIN NOTIFICATION DROPDOWN &ndash;&gt;
                               <li class="dropdown dropdown-extended dropdown-notification dropdown-dark" id="header_notification_bar">
                                   <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                                       <i class="icon-bell"></i>
                                       <span class="badge badge-default">7</span>
                                   </a>
                                   <ul class="dropdown-menu">
                                       <li class="external">
                                           <h3>You have
                                               <strong>12 pending</strong> tasks</h3>
                                           <a href="app_todo.html">view all</a>
                                       </li>
                                       <li>
                                           <ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">just now</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-success">
                                                               <i class="fa fa-plus"></i>
                                                           </span> New user registered. </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">3 mins</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-danger">
                                                               <i class="fa fa-bolt"></i>
                                                           </span> Server #12 overloaded. </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">10 mins</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-warning">
                                                               <i class="fa fa-bell-o"></i>
                                                           </span> Server #2 not responding. </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">14 hrs</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-info">
                                                               <i class="fa fa-bullhorn"></i>
                                                           </span> Application error. </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">2 days</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-danger">
                                                               <i class="fa fa-bolt"></i>
                                                           </span> Database overloaded 68%. </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">3 days</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-danger">
                                                               <i class="fa fa-bolt"></i>
                                                           </span> A user IP blocked. </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">4 days</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-warning">
                                                               <i class="fa fa-bell-o"></i>
                                                           </span> Storage Server #4 not responding dfdfdfd. </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">5 days</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-info">
                                                               <i class="fa fa-bullhorn"></i>
                                                           </span> System Error. </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="time">9 days</span>
                                                       <span class="details">
                                                           <span class="label label-sm label-icon label-danger">
                                                               <i class="fa fa-bolt"></i>
                                                           </span> Storage server failed. </span>
                                                   </a>
                                               </li>
                                           </ul>
                                       </li>
                                   </ul>
                               </li>
                               &lt;!&ndash; END NOTIFICATION DROPDOWN &ndash;&gt;
                               &lt;!&ndash; BEGIN TODO DROPDOWN &ndash;&gt;
                               <li class="dropdown dropdown-extended dropdown-tasks dropdown-dark" id="header_task_bar">
                                   <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                                       <i class="icon-calendar"></i>
                                       <span class="badge badge-default">3</span>
                                   </a>
                                   <ul class="dropdown-menu extended tasks">
                                       <li class="external">
                                           <h3>You have
                                               <strong>12 pending</strong> tasks</h3>
                                           <a href="app_todo_2.html">view all</a>
                                       </li>
                                       <li>
                                           <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="task">
                                                           <span class="desc">New release v1.2 </span>
                                                           <span class="percent">30%</span>
                                                       </span>
                                                       <span class="progress">
                                                           <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                                               <span class="sr-only">40% Complete</span>
                                                           </span>
                                                       </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="task">
                                                           <span class="desc">Application deployment</span>
                                                           <span class="percent">65%</span>
                                                       </span>
                                                       <span class="progress">
                                                           <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
                                                               <span class="sr-only">65% Complete</span>
                                                           </span>
                                                       </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="task">
                                                           <span class="desc">Mobile app release</span>
                                                           <span class="percent">98%</span>
                                                       </span>
                                                       <span class="progress">
                                                           <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
                                                               <span class="sr-only">98% Complete</span>
                                                           </span>
                                                       </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="task">
                                                           <span class="desc">Database migration</span>
                                                           <span class="percent">10%</span>
                                                       </span>
                                                       <span class="progress">
                                                           <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                                                               <span class="sr-only">10% Complete</span>
                                                           </span>
                                                       </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="task">
                                                           <span class="desc">Web server upgrade</span>
                                                           <span class="percent">58%</span>
                                                       </span>
                                                       <span class="progress">
                                                           <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100">
                                                               <span class="sr-only">58% Complete</span>
                                                           </span>
                                                       </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="task">
                                                           <span class="desc">Mobile development</span>
                                                           <span class="percent">85%</span>
                                                       </span>
                                                       <span class="progress">
                                                           <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                                                               <span class="sr-only">85% Complete</span>
                                                           </span>
                                                       </span>
                                                   </a>
                                               </li>
                                               <li>
                                                   <a href="javascript:;">
                                                       <span class="task">
                                                           <span class="desc">New UI release</span>
                                                           <span class="percent">38%</span>
                                                       </span>
                                                       <span class="progress progress-striped">
                                                           <span style="width: 38%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">
                                                               <span class="sr-only">38% Complete</span>
                                                           </span>
                                                       </span>
                                                   </a>
                                               </li>
                                           </ul>
                                       </li>
                                   </ul>
                               </li>
                               &lt;!&ndash; END TODO DROPDOWN &ndash;&gt;
                               <li class="droddown dropdown-separator">
                                   <span class="separator"></span>
                               </li>
                               &lt;!&ndash; BEGIN USER LOGIN DROPDOWN &ndash;&gt;
                               <li class="dropdown dropdown-user dropdown-dark">
                                   <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                                       <img alt="" class="img-circle" src="${ctx}/resources/metronic/layouts/layout3/img/avatar9.jpg">
                                       <span class="username username-hide-mobile">Nick</span>
                                   </a>
                                   <ul class="dropdown-menu dropdown-menu-default">
                                       <li>
                                           <a href="page_user_profile_1.html">
                                               <i class="icon-user"></i> My Profile </a>
                                       </li>
                                       <li>
                                           <a href="app_calendar.html">
                                               <i class="icon-calendar"></i> My Calendar </a>
                                       </li>
                                       <li>
                                           <a href="app_inbox.html">
                                               <i class="icon-envelope-open"></i> My Inbox
                                               <span class="badge badge-danger"> 3 </span>
                                           </a>
                                       </li>
                                       <li>
                                           <a href="app_todo_2.html">
                                               <i class="icon-rocket"></i> My Tasks
                                               <span class="badge badge-success"> 7 </span>
                                           </a>
                                       </li>
                                       <li class="divider"> </li>
                                       <li>
                                           <a href="page_user_lock_1.html">
                                               <i class="icon-lock"></i> Lock Screen </a>
                                       </li>
                                       <li>
                                           <a href="page_user_login_1.html">
                                               <i class="icon-key"></i> Log Out </a>
                                       </li>
                                   </ul>
                               </li>
                               &lt;!&ndash; END USER LOGIN DROPDOWN &ndash;&gt;
                               &lt;!&ndash; BEGIN QUICK SIDEBAR TOGGLER &ndash;&gt;
                               <li class="dropdown dropdown-extended quick-sidebar-toggler">
                                   <span class="sr-only">Toggle Quick Sidebar</span>
                                   <i class="icon-logout"></i>
                               </li>
                               &lt;!&ndash; END QUICK SIDEBAR TOGGLER &ndash;&gt;
                           </ul>
                       </div>
                   </div>-->

                <!-- END TOP NAVIGATION MENU -->
            </div>
            <!-- END MEGA MENU -->
        </div>
    </div>
    <!-- END HEADER MENU -->
</div>
<!-- END HEADER -->

<!-- BEGIN QUICK SIDEBAR -->
<!--<a href="javascript:;" class="page-quick-sidebar-toggler">
    <i class="icon-login"></i>
</a>
<div class="page-quick-sidebar-wrapper" data-close-on-body-click="false">
    <div class="page-quick-sidebar">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="javascript:;" data-target="#quick_sidebar_tab_1" data-toggle="tab"> Users
                    <span class="badge badge-danger">2</span>
                </a>
            </li>
            <li>
                <a href="javascript:;" data-target="#quick_sidebar_tab_2" data-toggle="tab"> Alerts
                    <span class="badge badge-success">7</span>
                </a>
            </li>
            <li class="dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> More
                    <i class="fa fa-angle-down"></i>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li>
                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
                            <i class="icon-bell"></i> Alerts </a>
                    </li>
                    <li>
                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
                            <i class="icon-info"></i> Notifications </a>
                    </li>
                    <li>
                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
                            <i class="icon-speech"></i> Activities </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
                            <i class="icon-settings"></i> Settings </a>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active page-quick-sidebar-chat" id="quick_sidebar_tab_1">
                <div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
                    <h3 class="list-heading">Staff</h3>
                    <ul class="media-list list-items">
                        <li class="media">
                            <div class="media-status">
                                <span class="badge badge-success">8</span>
                            </div>
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar3.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Bob Nilson</h4>
                                <div class="media-heading-sub"> Project Manager </div>
                            </div>
                        </li>
                        <li class="media">
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar1.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Nick Larson</h4>
                                <div class="media-heading-sub"> Art Director </div>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-status">
                                <span class="badge badge-danger">3</span>
                            </div>
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar4.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Deon Hubert</h4>
                                <div class="media-heading-sub"> CTO </div>
                            </div>
                        </li>
                        <li class="media">
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar2.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Ella Wong</h4>
                                <div class="media-heading-sub"> CEO </div>
                            </div>
                        </li>
                    </ul>
                    <h3 class="list-heading">Customers</h3>
                    <ul class="media-list list-items">
                        <li class="media">
                            <div class="media-status">
                                <span class="badge badge-warning">2</span>
                            </div>
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar6.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Lara Kunis</h4>
                                <div class="media-heading-sub"> CEO, Loop Inc </div>
                                <div class="media-heading-small"> Last seen 03:10 AM </div>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-status">
                                <span class="label label-sm label-success">new</span>
                            </div>
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar7.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Ernie Kyllonen</h4>
                                <div class="media-heading-sub"> Project Manager,
                                    <br> SmartBizz PTL </div>
                            </div>
                        </li>
                        <li class="media">
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar8.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Lisa Stone</h4>
                                <div class="media-heading-sub"> CTO, Keort Inc </div>
                                <div class="media-heading-small"> Last seen 13:10 PM </div>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-status">
                                <span class="badge badge-success">7</span>
                            </div>
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar9.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Deon Portalatin</h4>
                                <div class="media-heading-sub"> CFO, H&D LTD </div>
                            </div>
                        </li>
                        <li class="media">
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar10.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Irina Savikova</h4>
                                <div class="media-heading-sub"> CEO, Tizda Motors Inc </div>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-status">
                                <span class="badge badge-danger">4</span>
                            </div>
                            <img class="media-object" src="${ctx}/resources/metronic/layouts/layout/img/avatar11.jpg" alt="...">
                            <div class="media-body">
                                <h4 class="media-heading">Maria Gomez</h4>
                                <div class="media-heading-sub"> Manager, Infomatic Inc </div>
                                <div class="media-heading-small"> Last seen 03:10 AM </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="page-quick-sidebar-item">
                    <div class="page-quick-sidebar-chat-user">
                        <div class="page-quick-sidebar-nav">
                            <a href="javascript:;" class="page-quick-sidebar-back-to-list">
                                <i class="icon-arrow-left"></i>Back</a>
                        </div>
                        <div class="page-quick-sidebar-chat-user-messages">
                            <div class="post out">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar3.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Bob Nilson</a>
                                    <span class="datetime">20:15</span>
                                    <span class="body"> When could you send me the report ? </span>
                                </div>
                            </div>
                            <div class="post in">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar2.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Ella Wong</a>
                                    <span class="datetime">20:15</span>
                                    <span class="body"> Its almost done. I will be sending it shortly </span>
                                </div>
                            </div>
                            <div class="post out">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar3.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Bob Nilson</a>
                                    <span class="datetime">20:15</span>
                                    <span class="body"> Alright. Thanks! :) </span>
                                </div>
                            </div>
                            <div class="post in">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar2.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Ella Wong</a>
                                    <span class="datetime">20:16</span>
                                    <span class="body"> You are most welcome. Sorry for the delay. </span>
                                </div>
                            </div>
                            <div class="post out">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar3.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Bob Nilson</a>
                                    <span class="datetime">20:17</span>
                                    <span class="body"> No probs. Just take your time :) </span>
                                </div>
                            </div>
                            <div class="post in">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar2.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Ella Wong</a>
                                    <span class="datetime">20:40</span>
                                    <span class="body"> Alright. I just emailed it to you. </span>
                                </div>
                            </div>
                            <div class="post out">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar3.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Bob Nilson</a>
                                    <span class="datetime">20:17</span>
                                    <span class="body"> Great! Thanks. Will check it right away. </span>
                                </div>
                            </div>
                            <div class="post in">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar2.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Ella Wong</a>
                                    <span class="datetime">20:40</span>
                                    <span class="body"> Please let me know if you have any comment. </span>
                                </div>
                            </div>
                            <div class="post out">
                                <img class="avatar" alt="" src="${ctx}/resources/metronic/layouts/layout/img/avatar3.jpg" />
                                <div class="message">
                                    <span class="arrow"></span>
                                    <a href="javascript:;" class="name">Bob Nilson</a>
                                    <span class="datetime">20:17</span>
                                    <span class="body"> Sure. I will check and buzz you if anything needs to be corrected. </span>
                                </div>
                            </div>
                        </div>
                        <div class="page-quick-sidebar-chat-user-form">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Type a message here...">
                                <div class="input-group-btn">
                                    <button type="button" class="btn green">
                                        <i class="icon-paper-clip"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane page-quick-sidebar-alerts" id="quick_sidebar_tab_2">
                <div class="page-quick-sidebar-alerts-list">
                    <h3 class="list-heading">General</h3>
                    <ul class="feeds list-items">
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-info">
                                            <i class="fa fa-check"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> You have 4 pending tasks.
                                                        <span class="label label-sm label-warning "> Take action
                                                            <i class="fa fa-share"></i>
                                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> Just now </div>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="col1">
                                    <div class="cont">
                                        <div class="cont-col1">
                                            <div class="label label-sm label-success">
                                                <i class="fa fa-bar-chart-o"></i>
                                            </div>
                                        </div>
                                        <div class="cont-col2">
                                            <div class="desc"> Finance Report for year 2013 has been released. </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col2">
                                    <div class="date"> 20 mins </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-danger">
                                            <i class="fa fa-user"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> 24 mins </div>
                            </div>
                        </li>
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-info">
                                            <i class="fa fa-shopping-cart"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> New order received with
                                            <span class="label label-sm label-success"> Reference Number: DR23923 </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> 30 mins </div>
                            </div>
                        </li>
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-success">
                                            <i class="fa fa-user"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> 24 mins </div>
                            </div>
                        </li>
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-info">
                                            <i class="fa fa-bell-o"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> Web server hardware needs to be upgraded.
                                            <span class="label label-sm label-warning"> Overdue </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> 2 hours </div>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="col1">
                                    <div class="cont">
                                        <div class="cont-col1">
                                            <div class="label label-sm label-default">
                                                <i class="fa fa-briefcase"></i>
                                            </div>
                                        </div>
                                        <div class="cont-col2">
                                            <div class="desc"> IPO Report for year 2013 has been released. </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col2">
                                    <div class="date"> 20 mins </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <h3 class="list-heading">System</h3>
                    <ul class="feeds list-items">
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-info">
                                            <i class="fa fa-check"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> You have 4 pending tasks.
                                                        <span class="label label-sm label-warning "> Take action
                                                            <i class="fa fa-share"></i>
                                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> Just now </div>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="col1">
                                    <div class="cont">
                                        <div class="cont-col1">
                                            <div class="label label-sm label-danger">
                                                <i class="fa fa-bar-chart-o"></i>
                                            </div>
                                        </div>
                                        <div class="cont-col2">
                                            <div class="desc"> Finance Report for year 2013 has been released. </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col2">
                                    <div class="date"> 20 mins </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-default">
                                            <i class="fa fa-user"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> 24 mins </div>
                            </div>
                        </li>
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-info">
                                            <i class="fa fa-shopping-cart"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> New order received with
                                            <span class="label label-sm label-success"> Reference Number: DR23923 </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> 30 mins </div>
                            </div>
                        </li>
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-success">
                                            <i class="fa fa-user"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> 24 mins </div>
                            </div>
                        </li>
                        <li>
                            <div class="col1">
                                <div class="cont">
                                    <div class="cont-col1">
                                        <div class="label label-sm label-warning">
                                            <i class="fa fa-bell-o"></i>
                                        </div>
                                    </div>
                                    <div class="cont-col2">
                                        <div class="desc"> Web server hardware needs to be upgraded.
                                            <span class="label label-sm label-default "> Overdue </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="date"> 2 hours </div>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="col1">
                                    <div class="cont">
                                        <div class="cont-col1">
                                            <div class="label label-sm label-info">
                                                <i class="fa fa-briefcase"></i>
                                            </div>
                                        </div>
                                        <div class="cont-col2">
                                            <div class="desc"> IPO Report for year 2013 has been released. </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col2">
                                    <div class="date"> 20 mins </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-pane page-quick-sidebar-settings" id="quick_sidebar_tab_3">
                <div class="page-quick-sidebar-settings-list">
                    <h3 class="list-heading">General Settings</h3>
                    <ul class="list-items borderless">
                        <li> Enable Notifications
                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
                        <li> Allow Tracking
                            <input type="checkbox" class="make-switch" data-size="small" data-on-color="info" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
                        <li> Log Errors
                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
                        <li> Auto Sumbit Issues
                            <input type="checkbox" class="make-switch" data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
                        <li> Enable SMS Alerts
                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
                    </ul>
                    <h3 class="list-heading">System Settings</h3>
                    <ul class="list-items borderless">
                        <li> Security Level
                            <select class="form-control input-inline input-sm input-small">
                                <option value="1">Normal</option>
                                <option value="2" selected>Medium</option>
                                <option value="e">High</option>
                            </select>
                        </li>
                        <li> Failed Email Attempts
                            <input class="form-control input-inline input-sm input-small" value="5" /> </li>
                        <li> Secondary SMTP Port
                            <input class="form-control input-inline input-sm input-small" value="3560" /> </li>
                        <li> Notify On System Error
                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
                        <li> Notify On SMTP Error
                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
                    </ul>
                    <div class="inner-content">
                        <button class="btn btn-success">
                            <i class="icon-settings"></i> Save Changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>-->
<!-- END QUICK SIDEBAR -->


<div class="page-container">

    <script type="text/javascript">


    </script>

    <div class="sidebar-left-menu">
        <div class="fix-left-bg"></div>
        <div id="jquery-accordion-menu" class="jquery-accordion-menu black">
            <!--<div class="jquery-accordion-menu-header" id="form"></div>-->
            <ul id="demo-list">
                <li>
                    <a href="#"><i class="fa fa-cog"></i>资源管理处测试 </a>
                    <ul class="submenu">
                        <li><a href="#">预排名估算</a></li>
                        <li><a href="#">PC客户端视频</a></li>
                        <li><a href="#">手机视频 </a></li>
                        <li><a href="#">IDC服务器PING测试 </a></li>
                        <li><a href="#">TOP5游戏PING测试 </a></li>
                        <li><a href="#">十大网银+十大证券测试 </a></li>
                        <li><a href="#">TOP100网站测试 </a></li>
                    </ul>
                </li>
                <li class="active">
                    <a href="#" class="submenu-indicator-minus"><i class="fa fa-cog"></i>质量管理处测试 </a>
                    <ul class="submenu" style="display: block;">
                        <li><a href="${ctx}/analysis/quality/reckonList">预排名估算 </a></li>
                        <li class="active"><a href="${ctx}/analysis/quality/webVisitList">TOP100网页访问</a></li>
                        <li><a href="#">客户端视频 </a></li>
                        <li><a href="#">游戏PING测试 </a></li>
                        <li><a href="#">HTTP文件下载 </a></li>
                        <li><a href="#">QOS Ping测试 </a></li>
                        <li><a href="#">BRAS Ping测试 </a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-cog"></i>互联互通处测试 </a>
                    <ul class="submenu">
                        <li><a href="#">预排名估算</a></li>
                        <li><a href="#">集团骨干出口PING测试</a></li>
                        <li><a href="#">集团骨干出口WEB访问 </a></li>
                        <li><a href="#">集团三方出口PING测试 </a></li>
                        <li><a href="#">集团三方出口WEB访问 </a></li>
                    </ul>
                </li>
            </ul>
            <!--<div class="jquery-accordion-menu-footer">-->
            <!--Footer-->
            <!--</div>-->
        </div>
    </div>

    <div class="has-left-menu">
        <ul class="page-breadcrumb breadcrumb">
            <li>
                <a href="index.html">省内分析</a>
                <small>/</small>
            </li>
            <li>
                <a href="#">质量管理处测试</a>
                <small>/</small>
            </li>
            <li><span>预排名估算</span></li>
        </ul>
        <div class="page-content">
            <div class="portlet light ">
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject font-dark uppercase ">
                            历史指标排名
                        </span>
                    </div>
                </div>
                <div class="portlet-body" style="padding-top: 0px;">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="bs-filter-form form-inline" style="margin-bottom:10px;">
                                <div class="form-group  ">
                                    <label for="startTime1">开始时间：</label>
                                    <input type="text" class="form-control read-only-normal" placeholder="请选择开始时间"
                                           id="startTime1" name="startTime1" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月',maxDate:'#F{$dp.$D(\'endTime1\')||\'%y-%M\'}'})"  value="2018年1月">
                                </div>
                                <div class="form-group  ">
                                    <label for="endTime1">完成时间：</label>
                                    <input type="text" class="form-control read-only-normal" placeholder="请选择结束时间" id="endTime1"
                                           name="endTime1" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月',minDate:'#F{$dp.$D(\'startTime1\')}',maxDate:'%y-%M'})" value="2018年2月">
                                </div>
                                <div class="pull-right">
                                    <button style=" border-top-left-radius: 4px;border-bottom-left-radius: 4px;border-top-right-radius: 0px;
                                            border-bottom-right-radius: 0px;width: 73px;height: 25px;" onclick="javascript:pageSubmit(1);"
                                            type="button" class="btn btn-info filter-btn">
                                        <i class="glyphicon glyphicon-download"></i> 导入
                                    </button >
                                    <button style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;border-top-left-radius: 0px;
                                    border-bottom-left-radius: 0px;width: 73px;height: 25px;" onclick="javascript:pageSubmit(1);"
                                            type="button" class="btn btn-primary filter-btn">
                                        <i class="glyphicon  glyphicon-upload"></i> 导出
                                    </button>
                                </div>
                            </div>
                            <table class="table  table-vertical-middle" style="background-color: #f9f9f9;">
                                <thead>
                                <tr>
                                    <th style="border: none;">分类</th>
                                    <th style="border: none;">指标名称</th>
                                    <th style="border: none;">单位</th>
                                    <th style="border: none;">1月指标值</th>
                                    <th style="border: none;">1月排名</th>
                                    <th style="border: none;">2月指标值</th>
                                    <th style="border: none;">2月排名</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td rowspan="2">网页</td>
                                    <td>TOP100网站首屏时延</td>
                                    <td>ms</td>
                                    <td>1.83</td>
                                    <td>12</td>
                                    <td>1.85</td>
                                    <td>14</td>
                                </tr>
                                <tr>
                                    <td>TOP100网站达标率</td>
                                    <td>%</td>
                                    <td>72.1</td>
                                    <td>14</td>
                                    <td>74.2</td>
                                    <td>11</td>
                                </tr>
                                <tr>

                                    <td rowspan="2">视频</td>
                                    <td>TOP10视频播放卡顿次数</td>
                                    <td>次/小时</td>
                                    <td>0.02</td>
                                    <td>4</td>
                                    <td>0.09</td>
                                    <td>8</td>
                                </tr>
                                <tr>
                                    <td>TOP10视频播放卡顿时长占比</td>
                                    <td>%</td>
                                    <td>0.1</td>
                                    <td>10</td>
                                    <td>0.13</td>
                                    <td>9</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject font-dark uppercase ">
                            预排名估算
                        </span>
                    </div>
                    <div class="actions">
                        <button type="button" class="btn btn-success " style="height: 25px;padding: 2px 9px;">本月关键指标配置</button>
                        <button style="height: 25px;" class="btn btn-default">导出 <i class="glyphicon glyphicon-upload"></i></button>
                    </div>
                </div>
                <div class="portlet-body"  id="rank-wrap">
                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table" style="background-color: #f9f9f9;">
                                <thead>
                                <tr>
                                    <th> 分类 </th>
                                    <th> 指标名称 </th>
                                    <th> 单位 </th>
                                    <th> 集团考核值 </th>
                                    <th> 集团均值 </th>
                                    <th> 当前指标 </th>
                                    <th> 本月累计值 </th>
                                    <th> 本月预排名 </th>
                                    <th> 上月指标值 </th>
                                    <th> 上月排名 </th>
                                    <th> 趋势 </th>
                                    <th> 操作 </th>
                                </tr>
                                </thead>
                                <tobdy>
                                    <tr>
                                        <td rowspan="2"> 网页 </td>
                                        <td>TOP100网站达标率</td>
                                        <td>%</td>
                                        <td>70</td>
                                        <td>76.1</td>
                                        <td>77.9</td>
                                        <td>76.1</td>
                                        <td>10</td>
                                        <td>78.2</td>
                                        <td>15</td>
                                        <td>上升5</td>
                                        <td><a href="#">查看详情</a></td>
                                    </tr>
                                    <tr>
                                        <td>TOP100网站首屏时延</td>
                                        <td>ms</td>
                                        <td>2.5</td>
                                        <td>1.83</td>
                                        <td>1.89</td>
                                        <td>1.9</td>
                                        <td>16</td>
                                        <td>1.95</td>
                                        <td>15</td>
                                        <td>下降1</td>
                                        <td><a href="#">查看详情</a></td>
                                    </tr>
                                    <tr>
                                        <td rowspan="2">视频</td>
                                        <td>TOP10视频播放卡顿次数</td>
                                        <td>次/小时</td>
                                        <td>1</td>
                                        <td>0.33</td>
                                        <td>0.41</td>
                                        <td>0.12</td>
                                        <td>18</td>
                                        <td>0.08</td>
                                        <td>16</td>
                                        <td>下降2</td>
                                        <td><a href="#">查看详情</a></td>
                                    </tr>
                                    <tr>
                                        <td>TOP10视频播放卡顿时长占比</td>
                                        <td>%</td>
                                        <td>0.5</td>
                                        <td>0.3</td>
                                        <td>0.16</td>
                                        <td>0.27</td>
                                        <td>19</td>
                                        <td>0.15</td>
                                        <td>16</td>
                                        <td>下降3</td>
                                        <td><a href="#">查看详情</a></td>
                                    </tr>
                                </tobdy>
                                <!--     <tbody>
                                          <tr v-for="item in lastData"  :style="item.dStyle">
                                              <td>{{item.name}}</td>
                                              <td>{{item.last_score}}</td>
                                              <td>{{item.last_rank}}</td>
                                              <td>{{item.now_score}}</td>
                                              <td>{{item.now_rank}}</td>
                                              <td v-if="item.last_rank>item.now_rank">
                                                  下降{{item.last_rank-item.now_rank}}
                                              </td>
                                              <td v-if="item.last_rank<item.now_rank">
                                                  上升{{item.now_rank-item.last_rank}}
                                              </td>
                                              <td v-if="item.last_rank==item.now_rank">
                                                 持平
                                              </td>
                                              <td><a href="#">查看详情</a></td>
                                          </tr>
                                      </tbody>-->
                            </table>
                        </div>
                    </div>
                    <p class="text-tip">点击表格中查看详情，可切换下方图表</p>
                    <div class="well">
                        <div class="row"  style="position: relative;">
                            <button class="btn btn-default pull-right " style="padding: 3px 9px;position: absolute;top: 0px;right: 0px;z-index: 999;">导出 <i class="glyphicon glyphicon-upload"></i></button>
                        </div>
                        <div id="ec-bar" style="height:320px;"></div>
                        <div class="row"  style="position: relative;height: 34px;">
                            <button class="btn btn-default pull-right " style="padding: 3px 9px;position: absolute;top: 0px;right: 0px;z-index: 999;">导出 <i class="glyphicon glyphicon-upload"></i></button>
                        </div>
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>省份</th>
                                <th>评分</th>
                                <th>90%页面展示时延</th>
                                <th>网站达标率</th>
                            </tr>
                            </thead>
                            <tbody id="sort-tbody">
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!--<div class="page-footer">
    <div class="container-fluid">  2016 &copy; Design by Songt.
        <a href="javascript:;" title="宁波普天通信技术有限公司" target="_blank">宁波普天通信技术有限公司</a>
    </div>
</div>-->
<div class="scroll-to-top">
    <i class="icon-arrow-up"></i>
</div>
<!-- END INNER FOOTER -->
<!-- END FOOTER -->

<script type="text/javascript">

    (function($) {
        $.expr[":"].Contains = function(a, i, m) {
            return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
        };
        function filterList(header, list) {
            //@header 头部元素
            //@list 无需列表
            //创建一个搜素表单
            var form = $("<form>").attr({
                "class":"filterform",
                action:"#"
            }), input = $("<input>").attr({
                "class":"filterinput",
                type:"text"
            });
            $(form).append(input).appendTo(header);
            $(input).change(function() {
                var filter = $(this).val();
                if (filter) {
                    $matches = $(list).find("a:Contains(" + filter + ")").parent();
                    $("li", list).not($matches).slideUp();
                    $matches.slideDown();
                } else {
                    $(list).find("li").slideDown();
                }
                return false;
            }).keyup(function() {
                $(this).change();
            });
        }
        $(function() {
            filterList($("#form"), $("#demo-list"));
            window.addEventListener('scroll', function(){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop>40){
                    $(".fix-left-bg").css("top", '0');
                }else{
                    $(".fix-left-bg").css("top", '41px');
                }
            })
        });
    })($);


    $("#jquery-accordion-menu").jqueryAccordionMenu();

    $(function(){
        var test_items =  ['TOP100网页访问','客户端视频','游戏PING测试','HTTP文件下载','QOS Ping测试','BRAS Ping测试'];
        function getRankData() {
            var d = [];
            for(var i=0; i<test_items.length; i++){
                var obj = {
                    name: test_items[i],
                    last_rank:  (Math.random()*10+10).toFixed(0),
                    last_score: (Math.random()*60+40).toFixed(2),
                    now_rank:  (Math.random()*10+10).toFixed(0),
                    now_score: (Math.random()*60+40).toFixed(2)
                };

                d.push(obj)
            }
            return d;
        }
        /*   var app = new Vue({
         el: '#rank-wrap',
         data: {
         lastData: getRankData()
         }
         });*/
        initBar();
        initTbody();


        //顶部导航切换
        $("#demo-list li").click(function(){

            //简单的逻辑  开发需自行调整
            if($(this).find('.submenu').length){
                return ;
            }else{
                $("#demo-list li.active").removeClass("active");
                $($(this).parents("#demo-list li")).each(function(){
                    $(this).addClass("active")
                });
                $(this).addClass("active");
            }

        })
    });
    var _data_provinces =  ['安徽','福建','江苏','江西','上海','浙江','北京','河北','河南',
        '内蒙古','山东','山西','陕西','天津','甘肃','宁夏','青海','新疆',
        '广东', '广西', '海南','贵州','四川','西藏','云南','重庆','黑龙江','吉林',
        '辽宁', '湖北', '湖南','香港','澳门','台湾'];
    function initTbody(){
        var tempStr = "";
        for(var i=0;i< _data_provinces.length; i++){
            if(_data_provinces[i]=='海南'){
                tempStr +='<tr style="background:#CD5C5C;color:#fff">';
            }else{
                tempStr +='<tr>';
            }
//
            tempStr +='<td>'+(i+1)+'</td>';
            tempStr +='<td>'+_data_provinces[i]+'</td>';
            tempStr +='<td>'+ (100-i*2).toFixed(2) +'</td>';
            if(_data_provinces[i]=='海南'){
                tempStr +='<td>本月：25.23ms &emsp;&emsp;上月：24.21ms </td>';
                tempStr +='<td>本月：99.12% &emsp;&emsp;上月：99.35% </td>';
            }else{
                tempStr +='<td>'+ (Math.random()*10+20).toFixed(2) +'ms</td>';
                tempStr +='<td>'+ (Math.random()*1+99).toFixed(2) +'%</td>';
            }


            tempStr +='</tr>';

        }
        $("#sort-tbody").html(tempStr);
    }
    function initBar(){

        var chart = echarts.init(document.getElementById('ec-bar'));
        var option = {
            title:{
                text:'本月预估本省Top100网页访问得分排名',
                x:'center'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                show: false,
                data:['Top100网页访问得分']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
//                        date: ['成都市','绵阳市','自贡市','攀枝花市','泸州市','德阳市','广元市','遂宁市','内江市','乐山市',
//                            '资阳市','宜宾市','南充市','达州市','雅安市','阿坝藏族羌族自治州','甘孜藏族自治州','凉山彝族自治州','广安市',
//                            '巴中市','眉山市']
                    data :_data_provinces,  //更新版本1
                    axisLabel: {    //更新版本1
                        formatter: function (value, index) {
                            // 格式化成月/日，只在第一个刻度显示年份
                            return value.split('').join("\n");
                        }
                    }
                }
            ],
            yAxis : [
                {
                    splitLine:{
                        lineStyle:{
                            color: '#f1f1f1'
                        }
                    },
                    min:0,
                    max:100,
                    name: '分',
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'Top100网页访问得分',
                    type:'bar',
                    barWidth:'40%',
                    data: (function(){
                        var d = [];
                        for(var i=0; i<_data_provinces.length; i++){
                            d.push((Math.random(1)*80+20).toFixed(2));
                        }
                        d.sort().reverse();
                        var arr =[];
                        for(var i=0; i<d.length; i++) {
                            arr.push({
                                name     : _data_provinces[i],
                                value    : d[i],
                                itemStyle: (function(){
                                    if(_data_provinces[i]=='海南'){
                                        return {color:'#CD5C5C'}
                                    }else{
                                        return {color: '#3598dc'}
                                    }
                                })()
                            });
                        }
                        return arr;
                    })()
                }
            ]
        };
        chart.setOption(option);
        chart.on('click',function(param){
            console.log(param);
        });
    }
</script>
</body>
</html>
